<script lang="ts" setup>
import { queryImageMaterialList } from '@/api/editor/materials'

import SearchHeader from '@/components/editorModules/searchHeader.vue'
import { LazyImg } from '@/components/vue-waterfall-plugin-next'
import { useEditor } from '@/views/Editor/app'
import CompListWrap from '@/views/Editor/layouts/panel/leftPanel/wrap/CompListWrap.vue'
import usePageMixin from '@/views/Editor/layouts/panel/leftPanel/wrap/mixins/pageMixin'
import { getDefaultName } from '@/views/Editor/utils/utils'
import { Image } from 'leafer-ui'

const { editor } = useEditor()
const keyword = ref()
const cateList = reactive([
  {
    label: '全部',
    value: '-1',
  },
  {
    label: '风景图片',
    value: '1111',
  },
  {
    label: '插画图片',
    value: '1111',
  },
])
function changeCate(e) {
  console.log('e=', e)
}
function onSearch(value, ev) {
  console.log('value=', value)
  console.log('keyword=', keyword.value)
  console.log('ev=', ev)
}
const { page } = usePageMixin()
page.pageSize = 20
function fetchData() {
  queryImageMaterialList(page).then((res) => {
    if (res.success) {
      const newDataList = res.data.records
      if (newDataList.length > 0) {
        page.dataList.push(...newDataList)
        page.pageNum += 1
      }
      if (page.dataList.length >= res.data.total) {
        page.noMore = true
      }
      else {
        page.noMore = false
      }
    }
  })
}
function handleClick(item) {
  const image = new Image({
    name: getDefaultName(editor.contentFrame),
    // draggable: true,
    editable: true,
    x: 0,
    y: 0,
    ...item,
  })
  editor.add(image)
}
</script>

<template>
  <div class="wrap">
    <SearchHeader
      v-model="keyword"
      :cate-list="cateList"
      @change-cate="changeCate"
      @search="onSearch"
    />
    <div class="other-text-wrap">
      <CompListWrap
        :data="page.dataList"
        :no-more="page.noMore"
        max-height="calc(100vh - 115px)"
        @fetch-data="fetchData"
      >
        <template #item="{ item, url, index }">
          <ACard
            hoverable
            class="cursor-pointer drop-shadow"
            :body-style="{ padding: '0px' }"
            @click="handleClick(item)"
          >
            <div class="">
              <LazyImg
                :url="url"
                class="img"
              />
            </div>
          </ACard>
        </template>
      </CompListWrap>
    </div>
  </div>
</template>

<style lang="less" scoped>
.search__wrap {
  padding: 1.4rem 1rem 0.8rem 0rem;
}
</style>
